<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="icon" href="icon/icon.ico" />
  <title>考拉海购</title>
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./css/common.css" />
  <link rel="stylesheet" href="./css/nav.css" />
  <link rel="stylesheet" href="./css/head.css" />
  <link rel="stylesheet" href="./css/top.css" />
  <link rel="stylesheet" href="./css/main.css" />
  <link rel="stylesheet" href="./css/footer.css" />
</head>

<body>
  <!-- 1.头部导航 -->
  <nav class="nav clear-fix">
    <div class="warper">
      <!-- 1.1左侧导航 -->
      <div class="nav-left">
        <div class="welcome">考拉欢迎你!</div>
        <div class="account">
          <a href="./login.html">登录</a>
          <a href="./login.html">免费注册</a>
          <a href="#" class="phone">
            手机考拉
            <span class="code">
              <img src="./img/erweima.png" alt="二维码" srcset="" />
              <span>新人下载APP</span>
              <span>领30元优惠券</span>
              <span class="arrow"></span>
            </span>
          </a>
        </div>
      </div>
      <!-- 1.2右侧导航 -->
      <div class="nav-right">
        <div class="group2">
          <ul>
            <li>
              <a href="#">
                个人中心
                <i></i>
              </a>
              <ul class="dropdown">
                <li><a href="#">我的优惠</a></li>
                <li><a href="#">我的购物京铁</a></li>
                <li><a href="#">我的红包</a></li>
                <li><a href="#">我的考拉豆</a></li>
                <li class="line"></li>
                <li><a href="#">账号管理</a></li>
                <li><a href="#">我的实名认账</a></li>
                <li><a href="#">我的发票抬头</a></li>
                <li><a href="#">我的收藏商品</a></li>
                <li><a href="#">我关注的商品</a></li>
                <li class="line"></li>
                <li><a href="#">售后管理</a></li>
              </ul>
            </li>
            <li>
              <a href="#">
                客服中心
                <i></i>
              </a>
              <ul class="dropdown">
                <li><a href="#">联系客服</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">知识产权保护</a></li>
                <li><a href="#">规则中心</a></li>
              </ul>

            </li>
            <li>
              <a href="#">充值中心
                <i></i>
              </a>
              <ul class="dropdown">
                <li><a href="#">花费充值</a></li>
                <li><a href="#">游戏充值</a></li>
                <li><a href="#">App Store充值卡</a>
                </li>
              </ul>
              </a>
            </li>
            <li>
              <a href="#">消费权益
                <i></i>
              </a>
              <ul class="dropdown">
                <li><a href="#">消费之告知书</a></li>
              </ul>

            </li>
            <li>
              <a href="#">更多
                <i></i>
              </a>
              <ul class="dropdown">
                <li><a href="#">收藏本站</a></li>
                <li class="line"></li>
                <li><a href="#">新浪微博</a></li>
                <li><a href="#">微信公众号</a></li>
                <li><a href="#">招商合作</a></li>
              </ul>
              </a>
            </li>
            <li>
              <a class="video" href="#">视频内容</a>
            </li>
          </ul>
        </div>
        <div class="group1">
          <a href="#">每日订单</a>
          <a href="#">我的订单</a>
        </div>
      </div>
    </div>
  </nav>
  <!-- 2.头部区域 -->
  <header class="head">
    <div class="warper  clear-fix">
      <!-- 2.1 logo  -->
      <a href="#">
        <img src="./img/logo.png" alt="考拉图标" title="考拉海购" srcset="">
      </a>
      <!-- 2.2 chart  -->
      <a href="#" class="chart">
        <i></i>
        <span>购物车</span>
      </a>

      <!-- 2.3 search  -->
      <div class="search">
        <i></i>
        <input type="text" placeholder="印象保温杯">
        <span></span>

      </div>
    </div>
  </header>
  <!-- 3.top -->
  <section class="top">
    <div class=" warper clear-fix">
      <!-- 3.1.tabbar -->
      <div class="tabbar">
        <!-- 3.11 分类 -->
        <div class="category">
          <!-- 3.12 三线菜单 -->
          <div class="line-menu-icon">
            <i></i>
            <i></i>
            <i></i>
          </div>
          <span> 所有分类</span>
          <!-- 3.13  -->
          <ul class="categories">
            <li>
              <a href="#">
                <img class="icon1" src="./img/icon-meirongcaizhuang-1.png" alt="">
                <img class="icon2" src="./img/icon-meirongcaizhuang-2.png" alt="">
                <span>美容彩妆</span>
                <img class="arrow1" src="./img/arrow2-2.png" alt="">
                <img class="arrow2" src="./img/arrow2.png" alt="">
              </a>
            </li>


            <li>
              <a href="#">
                <img class="icon1" src="./img/icon-meirongcaizhuang-1.png" alt="">
                <img class="icon2" src="./img/icon-meirongcaizhuang-2.png" alt="">
                <span>美容彩妆</span>
                <img class="arrow1" src="./img/arrow2-2.png" alt="">
                <img class="arrow2" src="./img/arrow2.png" alt="">
              </a>
            </li>


            <li>
              <a href="#">
                <img class="icon1" src="./img/icon-meirongcaizhuang-1.png" alt="">
                <img class="icon2" src="./img/icon-meirongcaizhuang-2.png" alt="">
                <span>美容彩妆</span>
                <img class="arrow1" src="./img/arrow2-2.png" alt="">
                <img class="arrow2" src="./img/arrow2.png" alt="">
              </a>
            </li>


            <li>
              <a href="#">
                <img class="icon1" src="./img/icon-meirongcaizhuang-1.png" alt="">
                <img class="icon2" src="./img/icon-meirongcaizhuang-2.png" alt="">
                <span>美容彩妆</span>
                <img class="arrow1" src="./img/arrow2-2.png" alt="">
                <img class="arrow2" src="./img/arrow2.png" alt="">
              </a>
            </li>


            <li>
              <a href="#">
                <img class="icon1" src="./img/icon-meirongcaizhuang-1.png" alt="">
                <img class="icon2" src="./img/icon-meirongcaizhuang-2.png" alt="">
                <span>美容彩妆</span>
                <img class="arrow1" src="./img/arrow2-2.png" alt="">
                <img class="arrow2" src="./img/arrow2.png" alt="">
              </a>
            </li>

            <li>
              <a href="#">
                <img class="icon1" src="./img/icon-meirongcaizhuang-1.png" alt="">
                <img class="icon2" src="./img/icon-meirongcaizhuang-2.png" alt="">
                <span>美容彩妆</span>
                <img class="arrow1" src="./img/arrow2-2.png" alt="">
                <img class="arrow2" src="./img/arrow2.png" alt="">
              </a>
            </li>

            <li>
              <a href="#">
                <img class="icon1" src="./img/icon-meirongcaizhuang-1.png" alt="">
                <img class="icon2" src="./img/icon-meirongcaizhuang-2.png" alt="">
                <span>美容彩妆</span>
                <img class="arrow1" src="./img/arrow2-2.png" alt="">
                <img class="arrow2" src="./img/arrow2.png" alt="">
              </a>
            </li>


            <li>
              <a href="#">
                <img class="icon1" src="./img/icon-meirongcaizhuang-1.png" alt="">
                <img class="icon2" src="./img/icon-meirongcaizhuang-2.png" alt="">
                <span>美容彩妆</span>
                <img class="arrow1" src="./img/arrow2-2.png" alt="">
                <img class="arrow2" src="./img/arrow2.png" alt="">
              </a>
            </li>

            <li>
              <a href="#">
                <img class="icon1" src="./img/icon-meirongcaizhuang-1.png" alt="">
                <img class="icon2" src="./img/icon-meirongcaizhuang-2.png" alt="">
                <span>美容彩妆</span>
                <img class="arrow1" src="./img/arrow2-2.png" alt="">
                <img class="arrow2" src="./img/arrow2.png" alt="">
              </a>
            </li>

            <li>
              <a href="#">
                <img class="icon1" src="./img/icon-meirongcaizhuang-1.png" alt="">
                <img class="icon2" src="./img/icon-meirongcaizhuang-2.png" alt="">
                <span>美容彩妆</span>
                <img class="arrow1" src="./img/arrow2-2.png" alt="">
                <img class="arrow2" src="./img/arrow2.png" alt="">
              </a>
            </li>

            <li>
              <a href="#">
                <img class="icon1" src="./img/icon-meirongcaizhuang-1.png" alt="">
                <img class="icon2" src="./img/icon-meirongcaizhuang-2.png" alt="">
                <span>美容彩妆</span>
                <img class="arrow1" src="./img/arrow2-2.png" alt="">
                <img class="arrow2" src="./img/arrow2.png" alt="">
              </a>
            </li>

          </ul>
        </div>
        <!-- 3.2 list -->
        <ul class="list">
          <li><a href="#" class="active">首页</a></li>
          <li><a href="#">海外直购</a></li>
          <li><a href="#">考拉自由品牌</a></li>
          <li><a href="#">品质奶粉</a></li>
          <li><a href="#">人气面膜</a></li>
          <li><a href="#">充值</a></li>
        </ul>
        <div class="warper detail ">
          <div class="item">
            <div class="list">
              <h2>洗发护发</h2>
              <div class="list-items">
                <span>其他头发护理</span>
              </div>
            </div>
          </div>
          <div class="list-img">
            <img src="./img/businessmens-1.jpg" alt="">
            <img src="./img/businessmens-1.jpg" alt="">
            <img src="./img/businessmens-1.jpg" alt="">
            <img src="./img/businessmens-1.jpg" alt="">
            <img src="./img/businessmens-1.jpg" alt="">
            <img src="./img/businessmens-1.jpg" alt="">
          </div>
        </div>
      </div>

    </div>
    <div class="banner">
      <!-- 3.1 -->
      <a href="#" class="swapper">
        <img src="./img/banner.jpg" alt="">
      </a>
      <!-- 3.2 -->
      <div class="service">
        <div class="blur"></div>
        <div class="desc  warper clear-fix">
          <ul class="desc-list">
            <li><a href="#">
                考拉直营
              </a></li>
            <li><a href="#">全球直采</a></li>
            <li><a href="#">正品保障</a></li>
            <li><a href="#">售后无忧</a></li>
          </ul>
          <a class="tips" href="#">
            新人下载APP，领30元优惠券
          </a>
        </div>
      </div>
    </div>
  </section>
  <!-- 4.主体区域 -->
  <main class="main warper">

    <!-- 运动户外 -->
    <section class="sport">
      <div class="warper">
        <div class="title clear-fix">
          <h2>户外运动</h2>
          <span class="hot-word">热搜词:</span>
          <ul>
            <li><a href="#">阿迪达斯</a></li>
            <li><a href="#">耐克</a></li>
            <li><a href="#">斯凯奇</a></li>
            <li><a href="#">安德玛</a></li>
          </ul>
          <div class="right">
            <span>跟多好货</span>
            <img src="./img/arrow2.png" alt="" srcset="">
          </div>

        </div>
        <article class="warper clear-fix">
          <div class="banner">
            <a href="#">
              <img src="./img/sport.jpg" alt="">
            </a>
            <div class="tips-list">
              <a href="#"><span>运动潮鞋</span></a>
              <a href="#"><span>运动潮鞋</span></a>
              <a href="#"><span>运动潮鞋</span></a>
              <a href="#"><span>运动潮鞋</span></a>
              <a href="#"><span>运动潮鞋</span></a>
            </div>
          </div>
          <div class="list">
            <div class="  item item1">
              <div class="top">
                <h3>斯凯奇新品上市</h3>
                <p>热门鞋款低至5.7折</p>
              </div>
              <img src="./img/sport-2.jpg" alt="斯凯奇新品上市">
            </div>

            <div class="item item2">
              <div class="top">
                <h3>斯凯奇新品上市</h3>
                <p>热门鞋款低至5.7折</p>
              </div>
              <img src="./img/sport-3.jpg" alt="斯凯奇新品上市">
            </div>
            <div class="item right">
              <h3 class="tips">
                最近热卖
              </h3>
              <div class="right-list ">
                <div class="list-item">
                  <img src="./img/sport-6.jpg" alt="耐克">
                  <div class="desc">
                    <p>耐克（NIKE）RENEW RUN 2 男鞋2021春季新款运动鞋轻便网面透气耐磨跑步鞋CU3504/CQ8894</p>
                    <span>￥998</span>
                    <del>￥1000</del>
                  </div>
                </div>
                <div class="list-item">
                  <img src="./img/sport-6.jpg" alt="耐克">
                  <div class="desc">
                    <p>耐克（NIKE）RENEW RUN 2 男鞋2021春季新款运动鞋轻便网面透气耐磨跑步鞋CU3504/CQ8894</p>
                    <span>￥998</span>
                    <del>￥1000</del>
                  </div>
                </div>
                <div class="list-item">
                  <img src="./img/sport-6.jpg" alt="耐克">
                  <div class="desc">
                    <p>耐克（NIKE）RENEW RUN 2 男鞋2021春季新款运动鞋轻便网面透气耐磨跑步鞋CU3504/CQ8894</p>
                    <span>￥998</span>
                    <del>￥1000</del>
                  </div>
                </div>
                <div class="list-item">
                  <img src="./img/sport-6.jpg" alt="耐克">
                  <div class="desc">
                    <p>耐克（NIKE）RENEW RUN 2 男鞋2021春季新款运动鞋轻便网面透气耐磨跑步鞋CU3504/CQ8894</p>
                    <span>￥998</span>
                    <del>￥1000</del>
                  </div>
                </div>

              </div>
            </div>
            <div class="item">
              <div class="top">
                <h3>活力出游季</h3>
                <p>北面冲锋衣低至4折</p>
              </div>
              <img src="./img//sport-4.jpg" alt="斯凯奇新品上市">
            </div>
            <div class="item item5">
              <div class="top">
                <h3>安德玛健身特惠</h3>
                <p>热门鞋款低至5.7折</p>
              </div>
              <img src="./img//sport-5.jpg" alt="斯凯奇新品上市">
            </div>
          </div>

          </ul>
        </article>
      </div>


    </section>
    <!-- 热卖品牌 -->
    <section class="businessmen ">
      <div class="hot-brand clear-fix">
        <h3>热卖品牌</h3>
        <ul>
          <li><a href="#">
              <img src="./img/businessmens-1.jpg" alt="">
            </a></li>
          <li><a href="#">
              <img src="./img/businessmens-1.jpg" alt="">
            </a></li>
          <li><a href="#">
              <img src="./img/businessmens-1.jpg" alt="">
            </a></li>
          <li><a href="#">
              <img src="./img/businessmens-1.jpg" alt="">
            </a></li>
          <li><a href="#">
              <img src="./img/businessmens-1.jpg" alt="">
            </a></li>
        </ul>
      </div>
      </div>
    </section>

    <!--热门品牌  -->
    <section class="brand">
      <div class="warper">
        <div class="title clear-fix">
          <h2>热门品牌</h2>
          <span class="hot-word">热门品牌，全球一网打尽</span>

          <div class="right">
            <span>跟多好货</span>
            <img src="./img/arrow2.png" alt="" srcset="">
          </div>

        </div>
        <article class="warper clear-fix">
          <div class="banner">
            <a href="#">
              <img src="./img/hot-1.jpg" alt="">
            </a>
            <div class="decs">
              <div class="content">
                <h2>kao 花王</h2>
                <p>日本高人气日化品牌</p>
              </div>
            </div>
          </div>
          <ul class="list">
            <li>
              <img src="./img/businessmens-2.jpg" alt="">
              <h3>科学配方优质原材料</h3>
              <div class="mark">
                <p>15454人关注该商品</p>
                <button>
                  进入品牌
                </button>
              </div>
            </li>
            <li>
              <img src="./img/businessmens-2.jpg" alt="">
              <h3>科学配方优质原材料</h3>
              <div class="mark">
                <p>15454人关注该商品</p>
                <button>
                  进入品牌
                </button>
              </div>
            </li>
            <li>
              <img src="./img/businessmens-2.jpg" alt="">
              <h3>科学配方优质原材料</h3>
              <div class="mark">
                <p>15454人关注该商品</p>
                <button>
                  进入品牌
                </button>
              </div>
            </li>
            <li>
              <img src="./img/businessmens-2.jpg" alt="">
              <h3>科学配方优质原材料</h3>
              <div class="mark">
                <p>15454人关注该商品</p>
                <button>
                  进入品牌
                </button>
              </div>
            </li>
            <li>
              <img src="./img/businessmens-2.jpg" alt="">
              <h3>科学配方优质原材料</h3>
              <div class="mark">
                <p>15454人关注该商品</p>
                <button>
                  进入品牌
                </button>
              </div>
            </li>
            <li>
              <img src="./img/businessmens-2.jpg" alt="">
              <h3>科学配方优质原材料</h3>
              <div class="mark">
                <p>15454人关注该商品</p>
                <button>
                  进入品牌
                </button>
              </div>
            </li>
            <li>
              <img src="./img/businessmens-2.jpg" alt="">
              <h3>科学配方优质原材料</h3>
              <div class="mark">
                <p>15454人关注该商品</p>
                <button>
                  进入品牌
                </button>
              </div>
            </li>
            <li>
              <img src="./img/businessmens-2.jpg" alt="">
              <h3>科学配方优质原材料</h3>
              <div class="mark">
                <p>15454人关注该商品</p>
                <button>
                  进入品牌
                </button>
              </div>
            </li>

          </ul>
        </article>

      </div>


    </section>
    <!-- 热卖品牌 -->
    <section class="businessmen ">
      <div class="hot-brand clear-fix">
        <h3>热卖品牌</h3>
        <ul>
          <li><a href="#">
              <img src="./img/businessmens-1.jpg" alt="">
            </a></li>
          <li><a href="#">
              <img src="./img/businessmens-1.jpg" alt="">
            </a></li>
          <li><a href="#">
              <img src="./img/businessmens-1.jpg" alt="">
            </a></li>
          <li><a href="#">
              <img src="./img/businessmens-1.jpg" alt="">
            </a></li>
          <li><a href="#">
              <img src="./img/businessmens-1.jpg" alt="">
            </a></li>
        </ul>
      </div>
      </div>
    </section>

  </main>
  <!-- 5.底部区域 -->
  <footer class="footer">
    <div class="service warper">

      <div class="item">
        <span class="text">正</span>
        <div>
          <strong>正品承诺</strong>
          <span>正品保障</span>
        </div>
      </div>
      <div class="item">
        <span class="text">低</span>
        <div>
          <strong>正品承诺</strong>
          <span>正品保障</span>
        </div>
      </div>
      <div class="item">
        <span class="text">退</span>
        <div>
          <strong>正品承诺</strong>
          <span>正品保障</span>
        </div>
      </div>
      <div class="item">
        <span class="text">邮</span>
        <div>
          <strong>正品承诺</strong>
          <span>正品保障</span>
        </div>
      </div>
    </div>
    <div class="warper clear-fix ">
      <div class="info">
        <div>
          <img class="logo" src="./img/logo.png" alt="logo" srcset="">
        </div>
        <p>关注我们</p>
        <p>举报邮箱：heguijubao@list.alibaba-inc.com</p>
        <p>违法和不良信息举报电话：95102-86 (周一到周日09:00-24:00)</p>
      </div>

      <div class="list">
        <dl>
          <dt>考拉保障</dt>
          <dd>廉正举报</dd>
        </dl>
        <dl>
          <dt>新手指南</dt>
          <dd>购物流程</dd>
          <dd>支付方式</dd>
          <dd>通关税费</dd>
          <dd>常见问题</dd>
        </dl>
        <dl>
          <dt>售后服务</dt>
          <dd>售后政策</dd>
          <dd>退货流程</dd>
          <dd>特色服务</dd>
          <dd>联系客服</dd>
        </dl>
        <dl>
          <dt>物流配送</dt>
          <dd>配送方式</dd>
          <dd>配送服务</dd>
          <dd>运费标准</dd>
          <dd>物流跟踪</dd>
        </dl>
        <dl>
          <dt>商家服务</dt>
          <dd>招商合作</dd>
          <dd>销售联盟</dd>
          <dd>商家成长</dd>
        </dl>
        <dl>
          <dt>关于我们</dt>
          <dd>联系我们</dd>
          <dd>CEO邮箱</dd>
        </dl>
      </div>
    </div>
    <div class="web  ">
      <p>增值电信业务经营许可证：浙B2-20160288 （浙）网械平台备字[2018]第00007号 阿里巴巴版权所有©2003-2022隐私政策 - 考拉海购    </p>
     <p>
      网络文化经营许可证：浙网文（2020）4340-180号 浙江省网络食品销售第三方平台提供者备案：浙网食A33010006 网络第三方平台规范进口冷链食品承诺函
     </p>
 
     <p>
      浙公网安备 33010802002216号 互联网药品信息服务资格证书编号（浙）- 经营性 - 2017 - 0027 浙ICP备16011229号-6 自营经营者信息
     </p>
     <img src="./img/footer.png" alt="">
     <img src="./img/footer.png" alt="">
     <img src="./img/footer.png" alt="">
     <img src="./img/footer.png" alt="">
     <img src="./img/footer.png" alt="">
     <img src="./img/footer.png" alt="">
     <img src="./img/footer.png" alt="">
     <img src="./img/footer.png" alt="">
     <img src="./img/footer.png" alt="">
       </div>
     
       
  </footer>
 
</body>

</html>